<ul>
  <li ng-repeat="item in list" compile-dom compile-dom2 compile-dom3></li>
</ul>
<div class="alert alert-danger" role="alert">
  在控制台打印的数据可以看出：多个指令在同一个元素定义compile，首先一次执行指令的编译阶段，在一次执行指令prelink代码，而post代码是等待自己后面的指令的post都执行结束后在执行
</div>
<pre>
  zppdirective.directive('compileDom', function(){
            return {
              restrict: 'EA',
              replace: true,
              template: '<p>{{item.name}}</p>',
              // 定义了compile就不需要定义link,当compile返回一个方法这个方法就是link
              // tElement 正在执行该指令的当前dom元素的jquery对象
              // tAttrs 正在执行该指令的当前dom元素的属性
              compile: function(tElement, tAttrs, transclude){
                console.log('编译阶段开始执行 compileDom');
                // 改变当前元素的DOM结构
                tElement.append(angular.element('<span>我是添加进来的</span>'));
                return {
                  // pre:编译阶段执行
                  pre: function preLink(scope, iElement, iAttrs, controller) {
                    console.log('preLink... compileDom');
                  },
                  // post: 所有子元素指令的post都执行后执行
                  post: function postLink(scope, iElement, iAttrs, controller){
                    iElement.on('click', function(){
                      scope.item.name = 'click aaa'
                      scope.$apply();
                    })
                    console.log('postLink .... compileDom');
                  }

                };//return
                //  compile直接返回的一个方法，就是postLink
              },
              // 这个方法不会再执行了
              link: function(scope, ele, attrs, ctrl) {
                  console.log('我还会执行吗')
              }
            }
          })
  zppdirective.directive('compileDom2', function() {
              return {
                restrict: 'EA',
                replace: true,
                compile: function(ele, attr, trl) {
                    console.log('编译阶段开始执行 compileDom2');
                    return {
                      pre: function(scope, ele, attr, ctrl){
                        console.log('prelink .... compileDom2')
                      },
                      post: function(scope, ele, attr, ctrl) {
                        console.log('postlink ....compileDom2')
                      }
                    }
                }
              }
  })
  zppdirective.directive('compileDom3', function() {
              return {
                restrict: 'EA',
                replace: true,
                compile: function(ele, attr, trl) {
                    console.log('编译阶段开始执行 compileDom3');
                    return {
                      pre: function(scope, ele, attr, ctrl){
                        console.log('prelink .... compileDom3')
                      },
                      post: function(scope, ele, attr, ctrl) {
                        console.log('postlink ....compileDom3')
                      }
                    }
                }
              }
  })

</pre>
